<template>
  <div>
    <el-button type="success" @click="dialogVisible = true">创建</el-button>
    <el-input v-show="sinput" v-model="search" :suffix-icon="Search" class="table_search" placeholder="搜索"/>
  </div>
  <Table v-model:data="tableData" @submit="" v-model:diag="dialogVisible">
    <el-table-column prop="ip" label="IP地址" width="180">
      <template #default="scope">
        <span id="ip" @click="ToNode">{{scope.row.ip}}</span>
      </template>
    </el-table-column>

    <el-table-column prop="Owner.username" label="所属" width="180"/>
    <el-table-column prop="envs" label="所属环境" width="180">
      <template #default="scope">
        <span @click="ToNode">{{scope.row.envs.length}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="utime" label="更新时间" />
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="scope">
        <el-button  color="#64C1D7" size="small"  icon="Platform" @click="OpenTerminal(scope.row.ip)"></el-button>
        <el-button  color="#C4C3C2" size="small"  @click="OpenDrawer(scope.row.param)"><el-icon><View /></el-icon></el-button>
        <el-button  color="#EA9D2BC4" size="small"   @click="NodeObj.CpuKernal(scope.row.ip)"><el-icon><Edit /></el-icon></el-button>
        <el-button  color="#E3262FD9" size="small"  @click="OpenNodeInfo(scope.row)"><el-icon><Delete /></el-icon></el-button>
      </template>
    </el-table-column>
    </Table>
    <Pagination @change="ListNode" v-model:page="page"/>

  <Dialog v-model:diag="dialogVisible" title="服务器创建" width="25%" @submit="OnSubmit">
    <el-form :model="form" label-width="120px">
      <el-form-item label="IP地址">
        <el-input v-model="form.ip"/>
      </el-form-item>

      <el-form-item label="用户名">
        <el-input v-model="form.user"/>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="form.password" type="password"/>
      </el-form-item>
    </el-form>
  </Dialog>

  <el-drawer
      ref="drawerRef"
      v-model="taskdetail"
      title="节点信息"
      :before-close="handleClose"
      direction="rtl"
      class="demo-drawer">
    <el-descriptions
        title="内核信息"
        direction="vertical"
        :column="4"
        size="30%"
        border
    >
      <template v-for="(value, key)  in param">
        <el-descriptions-item :label="key">{{value}}</el-descriptions-item>
      </template>
    </el-descriptions>
  </el-drawer>

  <el-dialog v-model="dialogTerminal" title="终端" width="80%">
    <Terminal :ip="cur_ip"></Terminal>
  </el-dialog>
</template>

<script lang="ts" setup>
import { node } from './node_api'
import {Search} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from "vue-router";
import Terminal from '@/components/common/terminal.vue'
import Pagination from '@/components/common/Pagination.vue'
import Table from '@/components/common/Table.vue'
import Dialog from '@/components/common/Dialog.vue'

let page = reactive({"page":1,"size":15,"total":0})

var taskdetail = ref(false)
const search = ref("")
const param = ref(Object)
const tableData = ref([])

const value: boolean = true
var dialogVisible = ref(false)
var dialogTerminal = ref(false)

const form = reactive({
  ip: "",
  user:"",
  password:"",
})

const OnSubmit = async () => {
  await node.Create(form)
  ListNode()
  dialogVisible.value = false
}

const router = useRouter()

const ToNode = () => {
  router.push({"name": "节点服务"})
}

const OpenDrawer = (param_string) => {
  taskdetail.value = true
  var param = JSON.parse(param_string)
}

onMounted(()=>{
  ListNode()
})

const ListNode = async () => {
  var res = await node.List(page)
  tableData.value = res.data
  page.total = res.total
}

var cur_ip = ref('')
const OpenTerminal = (ip) =>{
  dialogTerminal.value = true
  cur_ip.value = ip
}

const handleClose = ()=>{
  dialogTerminal.value = false
}
const ToRoute = (name) => {
  router.push({"name": name})
}
</script>

<style scoped lang="scss">
@import "@/styles/table_header.scss";

#ip:hover{
  font-size: 15px;
  color: green;
  cursor: pointer;
}
</style>
